<template>
    <!-- 人员管理-智能闸机-访客记录 -->
    <div class="empVisitor">
        <div class="top">
            <div class="search">
                <div class="list">
                    <DatePicker
                        type="daterange"
                        placeholder="开始时间-结束时间"
                        style="width: 300px"
                        v-model="value"
                        @on-change="getTime"
                        :clearable="false"></DatePicker>
                    <input
                        type="password"
                        autocomplete="new-password"
                        style="display: none" />
                </div>
            </div>
        </div>
        <div class="bottom">
            <div class="table">
                <el-table
                    :data="list"
                    :height="tableHeight"
                    :stripe="true">
                    <el-table-column
                        fixed
                        prop="empName"
                        label="人员姓名"></el-table-column>
                    <el-table-column
                        prop="name"
                        label="闸机名称"></el-table-column>
                    <el-table-column
                        prop="recMode"
                        label="识别模式">
                        <template slot-scope="scope">
                            <span v-if="scope.row.recMode == 1">刷脸</span>
                            <span v-if="scope.row.recMode == 2">刷卡</span>
                            <span v-if="scope.row.recMode == 3">双重认证</span>
                            <span v-if="scope.row.recMode == 4">人证比对</span>
                            <span v-if="scope.row.recMode == 5">指纹</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="direction"
                        label="方向">
                        <template slot-scope="scope">
                            <span v-if="scope.row.direction == 1">进门</span>
                            <span v-if="scope.row.direction == 0">出门</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="photoUrl"
                        label="人脸照片">
                        <template slot-scope="scope">
                            <div class="demo-image__preview">
                                <el-image
                                    :src="scope.row.photoUrl == '' || !scope.row.photoUrl ? src : scope.row.photoUrl"
                                    style="display: block; width: 45px; height: 45px; border-radius: 50%"
                                    :preview-src-list="[scope.row.photoUrl == '' || !scope.row.photoUrl ? src : scope.row.photoUrl]"></el-image>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="temperature"
                        label="人体温度（℃）"></el-table-column>
                    <el-table-column
                        prop="showTime"
                        label="打卡时间"></el-table-column>
                </el-table>
            </div>
            <div
                class="clearfix"
                 >
                <div class="float-right">
                    <Page
                        v-if="totalCount"
                        style="margin: 20px 0; text-align: center"
                        :current.sync="current"
                        :total="totalCount"
                        :page-size="pageSize"
                        show-elevator
                        show-total
                        show-sizer
                        @on-change="pageChange"
                        @on-page-size-change="pageSizeChange"></Page>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { format, initYMD } from "@/sever/utils.js"
import { getEmpVisitor } from "@/api/api.js"
export default {
    data() {
        return {
            options: {
                disabledDate(date) {
                    return date > Date.now()
                },
            },
            src: require("./../../assets/images/common/noPeo.png"),
            current: 1,
            pageSize: 10,
            pageNum: 1,
            totalCount: "",
            list: [],
            deptId: "",
            deptName: "",
            value: [new Date(new Date().getTime() - 2592000000), new Date(new Date().getTime())],
            startTime: "",
            endTime: "",
            tableHeight: window.innerHeight - 345,
            previewList: [], //图片预览
        }
    },
    computed: {
        porjectObject() {
            return this.$store.state.porjectObject
        },
    },
    watch: {
        porjectObject(val, oldVal) {
            if (val.deptId != oldVal.deptId) {
                this.deptId = val.deptId
                this.deptName = val.name
                this.pageNum = 1
                this.current = 1
                this.value = []
                this.getAllList()
            }
        },
    },
    methods: {
        getAllList() {
            let params = {
                pageSize: this.pageSize,
                pageNum: this.pageNum,
                deptId: this.deptId,
                startTime: this.value[0] ? initYMD(this.value[0]) : "",
                endTime: this.value[1] ? initYMD(this.value[1]) : "",
            }
            getEmpVisitor(params)
                .then((res) => {
                    if (res.code == 200) {
                        this.list = res.data.list
                        this.totalCount = res.data.total
                    } else {
                        this.$Message.warning(res.msg)
                    }
                })
                .catch((error) => {
                    console.log(error)
                })
        },
        setPreview(src) {
            //图片预览
            this.previewList = []
            this.previewList.push(src)
        },
        getTime(i, v) {
            this.value = i
            this.getAllList()
        },
        pageChange(index) {
            this.pageNum = index
            this.getAllList()
        },
        pageSizeChange(index) {
            this.pageSize = index
            this.getAllList()
        },
    },
    mounted() {
        this.deptId = this.$store.state.porjectObject.deptId
        this.deptName = this.$store.state.porjectObject.name
        this.getAllList()
    },
}
</script>

<style scoped lang="less">
// @import "./../../assets/style/emp_common.less";
@import "./../../assets/style/themeBase.less";
.empVisitor {
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    background: #f5f5f5;
    .top {
        width: 100%;
        height: 72px;
        background: #fff;
        border-radius: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .search {
            width: auto;
            margin-left: 20px;
            padding-top: 20px;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            .list {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                padding-bottom: 20px;
                margin-right: 20px;
                span {
                    width: 70px;
                }
            }
        }
    }
    .bottom {
        margin-top: 10px;
        width: 100%;
        box-sizing: border-box;
        padding: 20px;
        height: calc(100% - 82px);
        background: #fff;
        border-radius: 10px;
    }
}
</style>
